.about-wrapper {
  background-color: $colorLightBeige;
  transition: filter 0.2s;

  // In case modal is active
  &.blurred {
    filter: blur(4px);
  }
}

// Modal of school details
.school-details {
  // Background to catch click-events
  &-background {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  &-wrapper {
    width: 85%;
    height: 55vh;
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);

    .background-image {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: -1;
    }

    .close {
      @include size(15px);
      position: absolute;
      top: 0;
      right: 0;
      padding: 23px $margin;
    }

    .content {
      display: flex;
      background: rgba(0, 0, 0, 0.55);
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      color: $colorWhite;
    }

    .first-row {
      font-size: $title;
      margin-top: 14px;
    }

    .second-row,
    .third-row,
    .fourth-row {
      font-family: $notoSans;
      font-size: $title-s;
    }

    .second-row,
    .third-row,
    .fourth-row,
    .button {
      margin-top: 20px;
    }

    .button {
      margin-bottom: 20px;
    }
  }
}
